body {
    height: 100%;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding:0;
    margin: 0;
    background-color: white;
    width: 100%;
    overflow-x: hidden;
}

.container {
    position: relative;
    height: 100%;
    width: 80%;
    margin: auto;
    overflow: hidden;
    min-height: 100%;
}

ul {
    margin: 0;
    padding: 0;
}

.button1 {
    height: 38px;
    background: limegreen;
    padding-left: 20px;
    border:0;
    padding-right: 20px;
    color: white;
    cursor:pointer;
}

.dark {
    padding: 15px;
    background: #1a1a1a;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 50px;
}

header {
    background: black;
    color: white;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: white 3px solid;
}

header a{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
}

header li{
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

header .branding {
    float: left;
}

header .branding h1 {
    margin: 0;
}

header nav{
    float:right;
    margin-top: 10px;
}

header .highlight, header .active a{
    color: greenyellow;
    font-weight: bold;
}

header .highlight2 {
    color: burlywood;
    font-weight: bold;
}

header a:hover {
    color: burlywood;
    font-weight: bold;
}

.showcase {
    padding-top: 20vh;
    padding-bottom: 20vh;
    min-height: 400px;
    background:url("7.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    color: white;
    background-attachment: fixed;
}

.showcase h1 {
    top: 50%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 50px;
    letter-spacing: 8px;
    text-transform: uppercase;
    background: rgba(0,0,0,.3);
    color: #fff;
    padding: 15px;
    border-top: black 6px solid;
    border-bottom: black 6px solid;
}

.showcase .p{
    letter-spacing: normal;
    font-size: 15px;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
}

.newsletter {
    border-top: white 3px solid;
    padding: 15px;
    color: white;
    background: black;
    border-bottom: white 3px solid;
}

.newsletter h1 {
    float: left;
}

.newsletter form {
    float: right;
    margin-top: 15px;
}

.newsletter input[type="email"]{
    padding: 4px;
    height: 25px;
    width: 250px;
}

.boxes {
    height: 50vh;
    margin-top: 10vh;
    border-bottom:#35424a 2px solid; 
}

.boxes .box {
    float:left;
    width: 30%;
    padding: 10px;
    text-align: center;
}

.boxes .box img {
    width: 90px;
}

.section {
    text-align: center;
    padding: 50px 80px;
    
}

.bgimg1, .bgimg2, .bgimg3, .bgimg4 {
    position: relative;
    opacity: 0.70;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bgimg1{
    background-image: url(1flood.jpg);
    min-height: 600px;
}

.bgimg2{
    background-image: url(1cause.jpg);
    min-height: 600px;
}

.bgimg3{
    background-image: url(1signs.jpg);
    min-height: 600px;
}

.bgimg4{
    background-image: url(1nieto.jpg);
    min-height: 600px;
}

.img11, .img22, .img33, .img44, .img55, img66 {
    width: 1000px;
    float: center;
}

.img11 img {
    max-height: 500px;
    margin-left: 25%;
}

.img22 img {
    max-height: 500px;
    margin-left: 25%;
}

.img33 img {
    max-height: 500px;
    margin-left: 15%;
}

.img44 img {
    max-height: 500px;
    margin-left: 25%;
}

.img55 img {
    max-height: 500px;
    margin-left: 25%;
}

.img66 img {
    max-height: 500px;
    margin-left: 23%;
}

.section-dark {
    background-color: #262626;
    color: white;
    text-align: left;
}

.section-light {
    background-color: white;
    color: black;
    text-align: left;
}

.ptext {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 27px;
    letter-spacing: 8px;
}

.ptext .border {
    background: rgba(102,102,102,.3);
    color: #fff;
    padding: 15px;
    border-top: black 6px solid;
    border-bottom: black 6px solid;
}

.ptext1 {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 27px;
    letter-spacing: 8px;
}

.ptext1 .border {
    background: rgba(255,255,255,.3);
    color: black;
    padding: 15px;
    border-top: black 6px solid;
    border-bottom: black 6px solid;
}

.end {
    background-color: rgba(8, 8, 8, 0.93);
    padding: 15px;
    color: white;   
    border-radius: 50px;
    border-right: 50px black solid;
    border-left: 50px black solid;
    border-top: 50px black solid;
    border-bottom: 50px black solid;
}

aside.sidebar {
    float: right;
    width: 30%;
    margin-top: -10px;
}

aside.sidebar .quote input, aside.sidebar .quote textarea{
    width: 90%;
    padding: 5px;
}

.button {
    height: 38px;
    background: burlywood;
    padding-left: 20px;
    border:0;
    padding-right: 20px;
    color: white;
    border-radius: 50px;
    cursor:pointer;
}

article.main-col {
    float: left;
    width: 65%;
    height: 100%;
}

h1.page-title{
    text-align: center;
    text-transform: uppercase;
    margin-top: 50px;
}

ul.services li{
    list-style: none;
    padding: 20px;
    border: #cccccc solid 1px;
    margin-bottom: 5px;
    background: #e6e6e6;
}

.team {
    padding: 60px 0;
    max-height: 100%;
    box-sizing: border-box;                   
    max-width: 100%;
}

.row{
    position:relative;
    width:100%;
    box-sizing: border-box;
}

.row h1 {
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 48px;
    text-transform: uppercase;
    color: burlywood;
}

.row p{
    margin: 20px 0 0;
    padding-left: 20px;
    border-left: 5px solid limegreen;
}

.mgt50px {
    margin-top: 50px;
    margin-bottom: 330px;
}

.row .column {
    margin: 0 10px;
    position: relative;
    width: calc(20% - 20px);
    min-height: 250px;
    float: right;
    box-sizing: border-box;
    overflow: hidden;
}

.row .column:before {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1;
    transition: .5s;
    mix-blend-mode: soft-light;
}

.row .column:hover:before {
    bottom: 0;
}

.row .column .imgBox {
    position: relative;
}

.row .column .imgBox img {
    width: 100%;
    transition: 5s;
    height: 100%;
}

.row .column:hover .imgBox img{
    transform: scale(1.5);
    max-width: 100%;
}

.row .column .details {
    position: absolute;
    bottom: -85px;
    left: 0;
    padding: 5px;
    box-sizing: border-box;
    background: rgba(38,38,38,1);
    width: 100%;
    transition: .5s;
    z-index: 2;
}

.row .column:hover .details {
    bottom: 0;
}

.row .column .details h3{
    margin: 0;
    padding: 0;
    color: white;
    font-size: 17px;
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
}

.row .column .details h3 span {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: burlywood;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    top: -6px;
}

.row .column .details ul {
    padding: 0;
    display: flex;
    float: none;
}

.row .column .details ul li {
    list-style: none;
    margin-left: 25%;
    margin-right: 50%;
}

.row .column .details ul li a {
    padding: 0 10px;
}

.row .column .details ul li a .fa {
    transition: .5s;
    width: 100%;
}

.row .column .details ul li a:hover .fa {
    transform: rotateY(360deg);
    background: rgba(0,0,0,0);
	color: #3a7999;
	box-shadow: inset 0 0 0 3px #3a7999;
}

footer {
    height: 80px;
    width: 100%;
    bottom: 100;
    position: absolute;
    padding: 20px;
    margin-top: 15px;
    color: dimgrey;
    background-color: black;
}

.foot-elements {
    margin-top: -20px;
}

.RT {
    display: inline;
    float: right;
    margin-top: -220px;
    margin-right: 60px;
}

.RT img{
    width: 150px;
    float: right;
    margin-right: 20px;
}

footer .RT {
    width: 230px;
    height: 15px;
    line-height: 10px;
    text-align: center;
    display: inline;
    float: right;
    margin-top: -50px;
    margin-right: 50px;
}

footer .RT a {
    text-decoration: none;
    color: green;
}

footer .RT a:hover {
    text-decoration: underline;
    color: yellowgreen;
}

footer .CM {
    float: left;
    width: 230px;
    text-align: left;
    display: inline;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa {
  padding: 7px;
  font-size: 14px;
  width: 18px;
  text-align: center;
  text-decoration: none;
  transition: .5s;
}

.fa:hover {
    opacity: 0.9;
    transform: rotateY(360deg);
}

@media(max-width: 768px){
    header .branding,
    header nav,
    header nav li,
    .newsletter h1,
    .newsletter form,
    .boxes, 
    .boxes .box,
    article.main-col,
    aside.sidebar,
    .img11,
    .img22
    {
        float:none;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    
    header {
        padding-bottom: 20px; 
    }
    
    .showcase h1 {
        margin-top: 40px;
    }
    
    .newsletter button, .quote button {
        display:block;
        width: 100%;
    }
    
    .newsletter form input[type="email"], .quote input, .quote textarea{
        width: 100%;
        margin-bottom: 5px;
    }
     
    .team {
        width: 100%;
        margin: 20px auto;
        margin-bottom: 5px;
    }
    
    .row .column {
        width: 485px;
        margin-bottom: 20px;
        margin-left: 40px;
    }
    
    .row .column .details{
        float: none;
        text-align: center;
        width: 100%;
        padding: 20px;
    }
    
    .row .column .details h3{
        margin-top: -10px;
        font-size: 20px;
    }
    
    .row .column .details ul {
        padding: 18px;
        margin-left: 10px;
    }
    
    .row .column .details ul li a .fa {
        transition: .5s;
        width: 100%;
        padding-left: 86px;
        padding-right: 86px;
    }
    
    .row .column .imgBox img {
        width: 100%;
    }
    
    .img11 {
        margin-left: -20px;
        width: 10px;
        float: center;
    }

    .img11 img {
        max-height: 400px;
    }

    .img22 {
        margin-left: -20px;
        width: 10px;
        float: center;
    }

    .img22 img {
        max-height: 350px;
    }

    .img33 {
        float: center;
    }

    .img33 img {
        max-height: 600px;
        width: 600px;
        margin-left: -50px;
    }

    .img44 {
        margin-left: -300px;
        float: center;
    }
    
    .img44 img {
        max-height: 500px;
        width: 600px;
    }
    
    .img55 {
        margin-left: -300px;
        float: center;
    }

    .img55 img {
        max-height: 500px;
        width: 600px;
    }
    
    .img66 {
        margin-left: -220px;
        float: center;
    }
    
    .img66 img {
        max-height: 500px;
        width: 600px;
    }
    
    .RT {
        display: inline;
        float: right;
        margin-top: -225px;
        margin-right: -20px;
    }
}